<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="活动详情"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: gray;"
      fixed="true"
      placeholder="true"
    />

    <!-- 活动详情 -->
    <div class="center">
      <p style="margin-left: 2rem;">基本信息</p>
      <hr>
      <div class="form">
        <div class="list">
          <div class="left">
            <p>活动主题：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>发起人：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>活动地点：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>活动开始时间：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>活动结束时间：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>报名截止时间：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>商家入驻上限：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>活动费用：</p>
          </div>
          <div class="right">
            <p>111</p>
          </div>
        </div>
        <div class="list">
          <div class="left">
            <p>活动说明：</p>
          </div>
          <div class="right">
            <p style="width: 200px;">扫街到点就哦啊文件dial渴望见到建档立卡就老咔叽的啦u角度来看就</p>
          </div>
        </div>
        <van-button type="default" style="font-size: 20px; border: 1px solid #000000;border-radius: 10px;margin-left: 13rem;margin-top: 2rem;">邀请好友参与</van-button>
      </div>
      <hr>
      <p style="margin-left: 2rem;">报名人数</p>
      <div class="enroll">
        <p><strong>查看报名情况</strong></p>
        <van-icon name="arrow" size="30" style="margin-top: 1rem;" />
      </div>

      <div class="button">
        <van-button type="default" to="/enroll" style="font-size: 20px; border: 1px solid #000000;border-radius: 10px;width: 80%;margin: 5rem 0 5rem 2.5rem;">我要报名</van-button>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:''
      }
    },

    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
    },

    mounted () {
      ;
    },
  }
</script>

<style lang="scss" scoped>

.center{
  
  .form{
    .list{
      display: flex;
      .left{
        width: 40%;
        text-align: right;
      }
      .right{
        width: 60%;
        text-align: left;
      }
    }
  }
}
.enroll{
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  p{
    font-size: 20px;
  }
}
</style>